<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"
    >
      <el-form-item
        label="订单ID"
        prop="orderId"
      >
        <el-input
          v-model="dataForm.orderId"
          required 
          placeholder="订单ID"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="订单编号"
        prop="orderSn"
      >
        <el-input
          v-model="dataForm.orderSn"
          required 
          placeholder="订单编号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品spuID"
        prop="spuId"
      >
        <el-input
          v-model="dataForm.spuId"
          required 
          placeholder="商品spuID"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品spu名称"
        prop="spuName"
      >
        <el-input
          v-model="dataForm.spuName"
          required 
          placeholder="商品spu名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品spu图片"
        prop="spuPic"
      >
        <single-upload v-model="dataForm.spuPic"></single-upload>
      </el-form-item>
      <el-form-item
        label="商品spu品牌"
        prop="spuBrand"
      >
        <el-input
          v-model="dataForm.spuBrand"
          required 
          placeholder="商品spu品牌"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品分类id"
        prop="categoryId"
      >
        <el-input
          v-model="dataForm.categoryId"
          required 
          placeholder="商品分类id"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品skuID"
        prop="skuId"
      >
        <el-input
          v-model="dataForm.skuId"
          required 
          placeholder="商品skuID"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品sku名称"
        prop="skuName"
      >
        <el-input
          v-model="dataForm.skuName"
          required 
          placeholder="商品sku名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品sku图片"
        prop="skuPic"
      >
        <single-upload v-model="dataForm.skuPic"></single-upload>
      </el-form-item>
      <el-form-item
        label="商品sku价格"
        prop="skuPrice"
      >
        <el-input
          v-model="dataForm.skuPrice"
          required 
          placeholder="商品sku价格"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品购买的数量"
        prop="skuQuantity"
      >
        <el-input
          v-model="dataForm.skuQuantity"
          required 
          placeholder="商品购买的数量"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品销售属性组合"
        prop="skuAttrsVals"
      >
        <el-input
          v-model="dataForm.skuAttrsVals"
          required 
          placeholder="商品销售属性组合"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品促销分解金额"
        prop="promotionAmount"
      >
        <el-input
          v-model="dataForm.promotionAmount"
          required 
          placeholder="商品促销分解金额"
        ></el-input>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit()"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import SingleUpload from './singleUpload'
export default {
  components: { SingleUpload },
  data () {
    return {
      visible: false,
      roleList: [],
      dataForm: {
        id: 0,
        orderId: '',
        orderSn: '',
        spuId: '',
        spuName: '',
        spuPic: '',
        spuBrand: '',
        categoryId: '',
        skuId: '',
        skuName: '',
        skuPic: '',
        skuPrice: '',
        skuQuantity: '',
        skuAttrsVals: '',
        promotionAmount: ''
      },
      dataRule: {
        orderId: [{ required: true, message: '订单ID不能为空', trigger: 'blur' }],
        orderSn: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
        spuId: [{ required: true, message: '商品spu编号不能为空', trigger: 'blur' }],
        spuName: [{ required: true, message: '商品spu名称不能为空', trigger: 'blur' }],
        spuPic: [{ required: true, message: '商品spu图片地址不能为空', trigger: 'blur' }],
        spuBrand: [{ required: true, message: '商品spu不能为空', trigger: 'blur' }],
        categoryId: [{ required: true, message: '商品分类ID不能为空', trigger: 'blur' }],
        skuId: [{ required: true, message: '商品sku编号不能为空', trigger: 'blur' }],
        skuName: [{ required: true, message: '商品sku名称不能为空', trigger: 'blur' }],
        skuPic: [{ required: true, message: '商品sku图片地址不能为空', trigger: 'blur' }],
        skuPrice: [{ required: true, message: '商品sku价格不能为空', trigger: 'blur' }],
        skuQuantity: [{ required: true, message: '商品购买的数量不能为空', trigger: 'blur' }],
        skuAttrsVals: [{ required: true, message: '商品销售属性组合不能为空', trigger: 'blur' }],
        promotionAmount: [{ required: true, message: '商品促销分解金额不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // getCurrentTime () {
    //   this.newTime = new Date()
    //   console.log(this.newTime)
    // },
    init (id) {
      this.dataForm.id = id || 0
      this.$http({
        url: this.$http.adornUrl('/sys/role/list'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.roleList = data.page.list
      }).then(() => {
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
      }).then(() => {
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/order/orderitem/info/${this.dataForm.id.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.orderId = data.orderItem.orderId
              this.dataForm.orderSn = data.orderItem.orderSn
              this.dataForm.spuId = data.orderItem.spuId
              this.dataForm.spuName = data.orderItem.spuName
              this.dataForm.spuPic = data.orderItem.spuPic
              this.dataForm.spuBrand = data.orderItem.spuBrand
              this.dataForm.categoryId = data.orderItem.categoryId
              this.dataForm.skuId = data.orderItem.skuId
              this.dataForm.skuName = data.orderItem.skuName
              this.dataForm.skuPic = data.orderItem.skuPic
              this.dataForm.skuPrice = data.orderItem.skuPrice
              this.dataForm.skuQuantity = data.orderItem.skuQuantity
              this.dataForm.skuAttrsVals = data.orderItem.skuAttrsVals
              this.dataForm.promotionAmount = data.orderItem.promotionAmount
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/order/order/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id.id || undefined,
              'orderId': this.dataForm.orderId,
              'orderSn': this.dataForm.orderSn,
              'spuId': this.dataForm.spuId,
              'spuName': this.dataForm.spuName,
              'spuPic': this.dataForm.spuPic,
              'spuBrand': this.dataForm.spuBrand,
              'categoryId': this.dataForm.categoryId,
              'skuId': this.dataForm.skuId,
              'skuName': this.dataForm.skuName,
              'skuPic': this.dataForm.skuPic,
              'skuPrice': this.dataForm.skuPrice,
              'skuQuantity': this.dataForm.skuQuantity,
              'skuAttrsVals': this.dataForm.skuAttrsVals,
              'promotionAmount': this.dataForm.promotionAmount
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
